<template>
	<view class="container">
		<view class="tui-box">
			<tui-list-cell :arrow="true" unlined :radius="true" @click="chooseAddr">
				<view class="tui-address">
					<view v-if="addressID!=null">
						<view v-for="item in data.memberReceiveAddressList" :key="item.id" v-if="item.id==addressID">
							<view class="tui-userinfo">
								<text class="tui-name">{{item.name}}</text> {{item.phoneNumber}}
							</view>
							<view class="tui-addr">
								<view class="tui-addr-tag">选择</view>
								<text> {{item.province}}{{item.city}}{{item.region}}{{item.detailAddress}}</text>
							</view>
						</view>
					</view>
					<view class="tui-none-addr" v-else>
						<image src="/static/img/map.png" class="tui-addr-img" mode="widthFix"></image>
						<text>选择收货地址</text>
					</view>
				</view>
				<view class="tui-bg-img"></view>
			</tui-list-cell>
			<view class="tui-top tui-goods-info">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						商品信息
					</view>
				</tui-list-cell>
				<block v-for="(item,index) in data.cartPromotionItemList" :key="index">
					<tui-list-cell :hover="false" padding="0">
						<view class="tui-goods-item">
							<image :src="item.productPic" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{item.productSubTitle}}</view>
								<view class="tui-goods-attr">黑色，50ml</view>
							</view>
							<view class="tui-price-right">
								<view>￥{{item.price}}</view>
								<view>x{{item.quantity}}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell v-if="data.couponHistoryDetailList.length!=0" :hover="false" @click="chooseCoup">
					<view class="tui-padding tui-flex">
						<view>优惠劵</view>
						<view v-if="data.orderType==0&&couponIndex!=0">
							<text>满{{couponData.coupon.minPoint}}减{{couponData.coupon.amount}}</text>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
						<view v-if="data.orderType==0&&couponIndex==0">
							<text>使用优惠劵</text>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
						<view v-if="data.orderType==1">
							<text>秒杀商品不能使用优惠劵</text>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell v-else :hover="false" @click="chooseCoup">
					<view class="tui-padding tui-flex">
						<view>优惠劵</view>
						<view>
							暂无优惠劵
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
				</tui-list-cell>

				<tui-list-cell :hover="false" >
					<view class="tui-padding tui-flex">
						<view>发票</view>
						<!-- <view class="tui-invoice-text">不开发票</view> -->
						<view>暂无发票</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>配送方式</view>
						<view>普通配送</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>配送费</view>
						<view>￥0.00</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" padding="0">
					<view class="tui-remark-box tui-padding tui-flex">
						<view>订单备注</view>
						<input type="text" class="tui-remark" v-model="note" placeholder="选填: 请先和商家协商一致" placeholder-class="tui-phcolor"></input>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-padding tui-flex tui-total-flex">
						<view class="tui-flex-end tui-color-red">
							<view class="tui-black">合计： </view>
							<view class="tui-size-26">￥</view>
							<view class="tui-price-large">{{totalAmount}}</view>
						</view>
					</view>
				</tui-list-cell>
			</view>

		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar">
			<view class="tui-flex-end tui-color-red tui-pr-20">
				<view class="tui-black">实付金额: </view>
				<view class="tui-size-26">￥</view>
				<view class="tui-price-large">{{realAmount}}</view>
			</view>
			<view class="tui-pr25">
				<tui-button width="200rpx" height="70rpx" :size="28" type="danger" shape="circle" @click="btnPay">确认支付</tui-button>
			</view>
		</view>
		<!-- 模态框 -->
		<u-modal v-model="modal_show" :content="content" @confirm="openConfirm()"></u-modal>

		<!-- 地址选择 -->
		<u-popup v-model="address_show" class="popup" mode="bottom" height="100%" :closeable="true">
			<view class="tui-safe-area">
				<view class="tui-address" v-if="data.memberReceiveAddressList.length!=0">
					<view v-for="(item, index) in data.memberReceiveAddressList" :key="index">
						<view class="tui-address-flex" >
							<label class="tui-checkbox" @click="choice(index)">
								<checkbox :value="item.id" :checked="item.id==addressID" color="#fff"></checkbox>
							</label>
							<view class="tui-address-left" @click="choice(index)">
								<view class="tui-address-main">
									<view class="tui-address-name tui-ellipsis">{{item.name}}</view>
									<view class="tui-address-tel">{{item.phoneNumber}}</view>
								</view>
								<view class="tui-address-detail">
									<view class="tui-address-label" v-if="item.defaultStatus==1">默认</view>
									<text>{{item.province}}{{item.city}}{{item.region}}{{item.detailAddress}}</text>
								</view>
							</view>
							<view class="tui-address-imgbox" @click="editAddr(item.id)">
								<image class="tui-address-img" src="/static/img/my/icon_addr_edit.png" />
							</view>
						</view>

					</view>
				</view>
				<view class="empty_address" v-else>
					<u-empty text="没有收货地址" mode="address"></u-empty>
				</view>
				<!-- 新增地址 -->
				<view class="tui-address-new">
					<tui-button shadow shape="circle" type="danger" height="88rpx" @click="addAddr">+ 新增收货地址</tui-button>
				</view>
			</view>
		</u-popup>
		<!-- 优惠劵选择 -->
		<u-popup v-model="coupon_show" class="popup" mode="bottom" height="100%" :closeable="true" close-icon-size="35" duration="150">
			<view class="coupon" v-if="data.couponHistoryDetailList!=''&&data.couponHistoryDetailList!=null">
				<radio-group >
					<view  class="tui-coupon-item tui-top20" style="margin-bottom: 20rpx;height: 100rpx; background: #fff;padding-left: 20px;" >
						<view class="tui-coupon-item tui-top20" style="display: flex; justify-content: space-between;padding-right:0rpx;" @click="couponGroup(0)">
						不需要优惠劵
						<radio value="1" class="tui-coupon-radio" color="#e41f19" :checked="couponIndex==0" />
					</view>
					</view>
				</radio-group>
				<radio-group >
					<label v-for="(item,index) in data.couponHistoryDetailList" :key="index" >
						<view class="tui-coupon-item tui-top20" @click="couponGroup(index+1)">
							<image src="/static/img/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
							<view class="tui-coupon-item-left">
								<view class="tui-coupon-price-box" >
									<view class="tui-coupon-price-sign" >￥</view>
									<view class="tui-coupon-price tui-price-small">{{item.coupon.amount}}</view>
									<!-- <view class="tui-coupon-price-sign" v-if="index%2==0">￥</view> -->
									<!--tui-price-small 面值>4位数的时候为true-->
									<!-- <view class="tui-coupon-price" :class="{'tui-price-small':false}">{{index%2==0?100*(index+1):9}}</view>
									<view class="tui-coupon-price-sign" v-if="index%2!=0">折</view> -->
								</view>
								<view class="tui-coupon-intro">满{{item.coupon.minPoint}}元可用</view>
							</view>
							<view class="tui-coupon-item-right">
								<view class="tui-coupon-content">
									<view class="tui-coupon-title-box">
										<view class="tui-coupon-btn" >{{item.coupon.useType==0?"全场券":item.coupon.useType==1?"分类卷":item.coupon.useType==2?"商品卷":""}}</view>
										<view class="tui-coupon-title">{{item.coupon.useType==0?"全部商品可用":item.coupon.useType==1?"同类商品可用":item.coupon.useType==2?"指定商品可用":""}}</view>
									</view>
									<view class="tui-coupon-rule">
										<view class="tui-rule-box tui-padding-btm">
											<view class="tui-coupon-circle"></view>
											<view class="tui-coupon-text">不可叠加使用</view>
										</view>
										<view class="tui-rule-box">
											<view class="tui-coupon-circle"></view>
											<view class="tui-coupon-text">{{item.coupon.startTime|formatDates}}至{{item.coupon.endTime|formatDates}}</view>
										</view>
									</view>
								</view>
								<radio value="1" class="tui-coupon-radio" color="#e41f19" :checked="couponIndex==index+1" />
							</view>
						</view>
					</label>
				</radio-group>
			</view>
			<u-empty v-else mode="coupon"></u-empty>
		</u-popup>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import PmsPortalProductController from '../../api/PmsPortalProductController.js'
	import OmsPortalOrderController from '../../api/OmsPortalOrderController.js'
	import Cookies from '../../utils/Cookies.js'
	import {formatDate} from '../../utils/date.js'
	export default {

		data() {
			return {
				failTimeout:false,
				hasCoupon: true,
				insufficient: false,
				data: [],
				totalAmount: 0, //总金额
				content: '', //模态框显示内容
				modal_show: false, //模态框显示隐藏
				addressID: null, //默认地址id
				address_show: false, //地址选择抽屉
				cartIds:[],	
				note:'',
				productId:null,
				skuId:null,
				goodsNumber:null,	//数量
				productData:{},
				coupon_show: false,
				couponData:{},
				couponIndex:1,
				realAmount:0,
				flashPromotionId:null,
				flashPromotionProductRelationId:null,
				flashPromotionSessionId:null,
				btnPayT:true,
			}
		},
		 onLoad(option) {
			this.productId=option.productId
			this.skuId=option.skuId
			this.goodsNumber=option.goodsNumber
			this.flashPromotionId=option.fpId
			this.flashPromotionProductRelationId=option.fpprId
			this.flashPromotionSessionId=option.fpsId
			if(this.productId==null||this.productId==''||this.productId=='undefined'){
				uni.navigateBack()
			}else if(this.skuId==null||this.skuId==''||this.skuId=='undefined'){
				uni.navigateBack()
			}else if(this.goodsNumber==null||this.goodsNumber==''||this.goodsNumber=='undefined'){
				uni.navigateBack()
			}
		},
		async onShow() {
			let adr=null;
			await PmsPortalProductController.detail(this.productId).then(res=>{
				if(res.data.code==200){
					adr=res.data.data.skuStockList.filter(e=>{
						return e.id==this.skuId
					})
					this.productData=res.data.data;
				}else if(res.data.code==401){
					Cookies.login()
				}
			}).catch(err=>{
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
			
			
			this.addressID=null;
			await OmsPortalOrderController.productGenerateConfirmOrder(
				adr[0].price,
				adr[0].spData,
				this.productData.product.brandName,
				this.productData.product.productCategoryId,
				this.productData.product.id,
				this.productData.product.name,
				this.productData.product.pic,
				adr[0].skuCode,
				adr[0].id,
				this.productData.product.productSn,
				this.productData.product.subTitle,
				this.goodsNumber,
				this.flashPromotionId,
				this.flashPromotionProductRelationId,
				this.flashPromotionSessionId
			).then(res => {
				if (res.data.code == 200) {
					// if(res.data.data.cartPromotionItemList.length==0){
					// 	uni.navigateBack()
					// }
					res.data.data.cartPromotionItemList.map(item => {
						if (item.realStock <= 0) {
							this.content = item.productName + '，暂无该商品'
							this.modal_show = true;
						} else {
							this.totalAmount += item.price * item.quantity
						}
					})
					if(res.data.data.memberReceiveAddressList.length!=0){
						let addressLsit = res.data.data.memberReceiveAddressList.filter(e => {
							return e.defaultStatus == 1;
						})
						if (addressLsit.length != 0) {
							this.addressID = addressLsit[0].id;
						} else {
							this.addressID = res.data.data.memberReceiveAddressList[0].id;
						}
					}
					this.data = res.data.data
				}else if(res.data.code==401){
					Cookies.login()
				}else{
					
					setTimeout(()=>{
						this.$u.toast(res.data.message);
					},1)
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
				}
			}).catch(err => {
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
			if(this.data.orderType!=1){
				this.couponData=this.data.couponHistoryDetailList[this.couponIndex-1];
				if(this.couponData!=null&&this.couponData!=''&&this.couponData!='undefined'){
					if(this.couponData.coupon!=null&&this.couponData.coupon!=''&&this.couponData.coupon!='undefined'){
						
						this.realAmount=this.totalAmount-this.couponData.coupon.amount;
					}else{
						this.realAmount=this.totalAmount
					}
				}else{
					this.realAmount=this.totalAmount
				}
			}else{
				this.realAmount=this.data.calcAmount.payAmount
			}
			
			
			
		},
		methods: {
			couponGroup(index){
				if(index!=0){
					this.couponIndex=index;
					this.couponData=this.data.couponHistoryDetailList[index-1]
					this.coupon_show=false;
					this.realAmount=this.totalAmount-this.couponData.coupon.amount;
				}else{
					this.couponIndex=index;
					this.couponData=null;
					this.coupon_show=false;
					this.realAmount=this.totalAmount;
				}
				
			},
			chooseAddr() {

				this.address_show = true
			},
			chooseCoup() {
			
				this.coupon_show = true
			},
			btnPay() {
				if(this.btnPayT){
					
				this.btnPayT=false;
				let arr=null;
				if(this.couponData!=null&&this.couponData!=''&&this.couponData!='undefined'){
					if(this.couponData.coupon!=null&&this.couponData.coupon!=''&&this.couponData.coupon!='undefined'){
						arr=this.couponData.coupon.id
					}
				}
				if(this.addressID!=null&&this.addressID!=''&&this.addressID!='undefined'){
					OmsPortalOrderController.resultGenerateOrder(
						this.data.cartPromotionItemList[0],
						arr,
						this.addressID,
						2,
						null,
						this.note,
						this.flashPromotionId,
						this.flashPromotionProductRelationId,
						this.flashPromotionSessionId,
						this.data.orderType
					).then(res=>{
						if(res.data.code==200){
							
							uni.redirectTo({
								url:'/pages/pay/pay?orderId='+res.data.data.order.id
							})
							
						}else{
							setTimeout(()=>{
								this.$u.toast(res.data.message);
							},1)
							setTimeout(()=>{
								this.btnPayT=true;
								uni.navigateBack();
							},1500)
						}
						
					}).catch(err=>{
						if(err.errMsg=='request:fail timeout'){
							this.failTimeout=true
						}
					})
				}else{
					this.$refs.toast.show( {
					title: "请选择收货地址",
					imgUrl: "/static/img/toast/info-circle.png",
					icon: true
				})
				}
				}
			},
			openConfirm() {

				uni.navigateBack()
			},
			choice(index){
				this.addressID=this.data.memberReceiveAddressList[index].id;
				this.address_show = false
			},
			editAddr(id) {
				uni.navigateTo({
					url: "/pages/address/editAddress?addressId=" + id
				})
			},
			addAddr() {
				uni.navigateTo({
					url: "/pages/address/addAddress"
				})
			},
		},
		filters:{
			formatDates(date){	
				return formatDate(new Date(date),"yyyy-MM-dd");
			}
		},
	}
</script>

<style>
	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}
	
	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #eb0909;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}
	
	/* #endif */
	/* #ifndef MP-WEIXIN */
	
	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}
	
	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #eb0909;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}
	
	/* #endif */
</style>
<style scoped>
	.container {
		padding-bottom: 98rpx;
	}

	.tui-box {
		padding: 20rpx 0 118rpx;
		box-sizing: border-box;
	}

	.tui-address {
		min-height: 80rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.tui-userinfo {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 30rpx;
		padding-bottom: 12rpx;
	}

	.tui-name {
		padding-right: 40rpx;
	}

	.tui-addr {
		font-size: 24rpx;
		word-break: break-all;
		padding-right: 25rpx;
	}

	.tui-addr-tag {
		padding: 5rpx 8rpx;
		flex-shrink: 0;
		background: #EB0909;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		line-height: 25rpx;
		transform: scale(0.8);
		transform-origin: 0 center;
		border-radius: 6rpx;
	}

	.tui-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

	.tui-top {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-padding {
		box-sizing: border-box;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.tui-total-flex {
		justify-content: flex-end;
	}

	.tui-color-red,
	.tui-invoice-text {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-balance {
		font-size: 28rpx;
		font-weight: 500;
	}

	.tui-black {
		color: #222;
		line-height: 30rpx;
	}

	.tui-gray {
		color: #888888;
		font-weight: 400;
	}

	.tui-light-dark {
		color: #666;
	}

	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}

	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	/* #ifndef H5 */
	.tui-remark-box {
		padding: 22rpx 30rpx;
	}

	/* #endif */
	/* #ifdef H5 */
	.tui-remark-box {
		padding: 26rpx 30rpx;
	}

	/* #endif */

	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}

	.tui-scale-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-scale-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */
	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-pr-30 {
		padding-right: 30rpx;
	}

	.tui-pr-20 {
		padding-right: 20rpx;
	}

	.tui-none-addr {
		height: 80rpx;
		padding-left: 5rpx;
		display: flex;
		align-items: center;
	}

	.tui-addr-img {
		width: 36rpx;
		height: 46rpx;
		display: block;
		margin-right: 15rpx;
	}


	.tui-pr25 {
		padding-right: 25rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.popup>>>.u-radio {
		justify-content: center;
	}

	.popup .u-radio-group>>>..u-radio {
		margin-top: 40rpx;
	}
	
	
</style>

<style lang="scss" scoped>
	.popup {


		.tui-address {
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: 160rpx;
		}

		.tui-address-flex {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
		}

		.tui-address-main {
			width: 600rpx;
			height: 70rpx;
			display: flex;
			font-size: 30rpx;
			line-height: 86rpx;
			padding-left: 30rpx;
		}

		.tui-address-name {
			min-width: 120rpx;
			max-width: 400rpx;
			height: 60rpx;
			overflow: hidden;
			word-break: break-all;
			/* break-all(允许在单词内换行。) */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 1;
			/** 显示的行数 **/
		}

		.tui-address-tel {
			margin-left: 20rpx;
		}

		.tui-address-detail {
			font-size: 24rpx;
			word-break: break-all;
			padding-bottom: 25rpx;
			padding-left: 25rpx;
			padding-right: 120rpx;
		}

		.tui-address-label {
			padding: 5rpx 8rpx;
			flex-shrink: 0;
			background: #e41f19;
			border-radius: 6rpx;
			color: #fff;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			line-height: 25rpx;
			transform: scale(0.8);
			transform-origin: center center;
			margin-right: 6rpx;
		}

		.tui-address-imgbox {
			width: 80rpx;
			height: 100rpx;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 10rpx;
		}

		.tui-address-img {
			width: 36rpx;
			height: 36rpx;
		}

		.tui-address-new {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
			padding: 20rpx 25rpx 30rpx;
			box-sizing: border-box;
			background: #fafafa;
		}

		.tui-safe-area {
			padding-bottom: env(safe-area-inset-bottom);
		}

		.empty_address {
			margin-top: 150rpx;
		}
	}
</style>
<style scoped>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.coupon{
		background-color: #F5F5F5;
		height: 100%;
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin-top: -20rpx;
		padding-top: 90rpx;

	}
	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	
	.tui-coupon-banner {
		width: 100%;
	}
	
	.tui-coupon-item {
		width: 100%;
		height: 210rpx;
		position: relative;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	
	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}
	
	.tui-coupon-item-left {
		width: 218rpx;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}
	
	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}
	
	.tui-coupon-price-sign {
		font-size: 30rpx;
	}
	
	.tui-coupon-price {
		font-size: 70rpx;
		line-height: 68rpx;
		font-weight: bold;
	}
	
	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}
	
	
	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}
	
	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}
	
	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}
	
	.tui-color-grey {
		color: #888 !important;
	}
	
	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}
	
	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-coupon-rule {
		padding-top: 52rpx;
	}
	
	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}
	
	.tui-padding-btm {
		padding-bottom: 6rpx;
	}
	
	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}
	
	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}
	
	.tui-top20 {
		margin-top: 20rpx;
	}
	
	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}
	
	
	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}
	
	.tui-btn-box {
		position: absolute;
		width: 146rpx;
		height: 52rpx;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;
	}
	
	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}
	
	/* #endif */
	
	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}
	
	/* #endif */
</style>